<template>
  <div id="moduleAndMenuByOrgDiv">
    <Splitpanes>
      <Pane size="50">
        <vxe-toolbar perfect>
          <template #buttons>
            <div class="smallToolTitle">模块</div>
            <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="复制" @click="copyModuleAndMenu"></vxe-button>
            <vxe-button type="text" class="button-blue" icon="vxe-icon-square-plus" content="粘贴" @click="pasteModuleAndMenu" :disabled="isEmpty(copyOrgId)"></vxe-button>
            <vxe-button type="text" class="button-blue" icon="vxe-icon-square-plus" content="粘贴系统参数" @click="pasteSysParam" :disabled="isEmpty(copyOrgId)"></vxe-button>

          </template>
        </vxe-toolbar>
        <div class="modulTable">
          <vxe-table ref="moduleTable" align="left" border="inner" height="auto" class="mytable-scrollbar" :loading="showLoading" :data="moduleList" @current-change="moduleRowClick" :row-config="{ isCurrent: true, isHover: true }" :keyboard-config="{
                isArrow: true,
                isTab: true,
                isEdit: true
              }" resizable show-overflow keep-source>
            <vxe-column type="checkbox" width="26" align="center"></vxe-column>
            <vxe-column type="seq" title="序号" width="30" align="left"></vxe-column>
            <vxe-column field="icon" title="图标" width="40" align="left" :edit-render="{ autofocus: '.vxe-input--inner' }">
              <template #default="{ row }">
                <el-icon size="20" class="icon">
                  <component :is="row.icon"></component>
                </el-icon>
              </template>

            </vxe-column>
            <vxe-column field="code" title="编码" width="100" :edit-render="{ autofocus: '.vxe-input--inner' }" align="left">
              <template #edit="{ row, rowIndex, column }">
                <vxe-input v-model="row.code" type="text" @keydown.enter="enterEvent(row, rowIndex, column)"></vxe-input>
              </template>
            </vxe-column>
            <vxe-column field="name" title="名称" width="120" :edit-render="{ autofocus: '.vxe-input--inner' }" align="left">
              <template #edit="{ row, rowIndex, column }">
                <vxe-input v-model="row.name" type="text" @keydown.enter="enterEvent(row, rowIndex, column)"></vxe-input>
              </template>
            </vxe-column>

            <vxe-column field="bigIcon" title="大图标" width="100" :edit-render="{ autofocus: '.vxe-input--inner' }" align="left">
              <template #edit="{ row, rowIndex, column }">
                <vxe-input v-model="row.bigIcon" type="text" @keydown.enter="enterEvent(row, rowIndex, column)"></vxe-input>
              </template>
            </vxe-column>
            <vxe-column field="sn" title="顺序号" min-width="80" :edit-render="{ autofocus: '.vxe-input--inner' }" align="left">
              <template #edit="{ row, rowIndex, column }">
                <vxe-input v-model="row.sn" type="text" @keydown.enter="enterEvent(row, rowIndex, column)"></vxe-input>
              </template>
            </vxe-column>
            <vxe-column field="bigIconBgcolour" title="背景色" min-width="80" align="center">
              <template #default="{ row }">
                <el-color-picker v-model="row.bigIconBgcolour" show-alpha />
              </template>
            </vxe-column>
            <vxe-column field="baseUrl" title="路径" min-width="80" :edit-render="{ autofocus: '.vxe-input--inner' }" align="left">
              <template #edit="{ row, rowIndex, column }">
                <vxe-input v-model="row.baseUrl" type="text" @keydown.enter="enterEvent(row, rowIndex, column)"></vxe-input>
              </template>
            </vxe-column>
          </vxe-table>
        </div>

      </Pane>
      <!-- 右侧表单 -->
      <Pane size="50">
        <div class="tablebox">
          <vxe-table class="mytable-scrollbar" align="left" border="inner" ref="functionTable" height="auto" :row-config="{ isCurrent: true, isHover: true }" :loading="sLoading" :tree-config="{}" :column-config="{ resizable: true }" :data="menuList" resizable show-overflow keep-source>
            <vxe-column field="title" width="150" title="名称" tree-node :edit-render="{ autofocus: '.vxe-input--inner' }" align="left">
              <template #edit="{ row }">
                <vxe-input v-model="row.title" type="text"></vxe-input>
              </template>
            </vxe-column>

            <vxe-column field="sn" width="60" title="顺序号" :edit-render="{ autofocus: '.vxe-input--inner' }" align="left">
              <template #edit="{ row }">
                <vxe-input v-model="row.sn" type="text"></vxe-input>
              </template>
            </vxe-column>

            <vxe-column field="isAssembly" width="80" title="是否组件" align="center">
              <template #default="{ row }">
                <vxe-switch v-model="row.isAssembly" size="mini" open-label="是" close-label="否" open-value="1" close-value="0"></vxe-switch>

              </template>
            </vxe-column>

            <vxe-column field="isReport" width="80" title="是否报表" align="center">
              <template #default="{ row }">
                <vxe-switch v-model="row.isReport" size="mini" open-label="是" close-label="否" open-value="1" close-value="0"></vxe-switch>
              </template>
            </vxe-column>
            <vxe-column field="isTool" width="90" title="是否工具栏显示" align="center">
              <template #default="{ row }">
                <vxe-switch v-model="row.isTool" size="mini" open-label="是" close-label="否" open-value="1" close-value="0"></vxe-switch>
              </template>
            </vxe-column>
            <vxe-column field="isDictMenu" width="90" title="是否字典型菜单" align="center">
              <template #default="{ row }">
                <vxe-switch v-model="row.isDictMenu" size="mini" open-label="是" close-label="否" open-value="1" close-value="0"></vxe-switch>
              </template>
            </vxe-column>

            <vxe-column field="reportName" title="模板名称" :edit-render="{ autofocus: '.vxe-input--inner' }" align="left" width="120">
              <template #default="{ row }">
                <span>{{ row.reportName }}</span>
              </template>
            </vxe-column>

            <vxe-column width="120" field="reportUrl" title="模版路径" :edit-render="{ autofocus: '.vxe-input--inner' }" align="left">
              <template #edit="{ row }">
                <vxe-input v-model="row.reportUrl" type="text"></vxe-input>
              </template>
            </vxe-column>

            <vxe-column field="url" title="路径" :edit-render="{ autofocus: '.vxe-input--inner' }" align="left" width="160px">
              <template #edit="{ row }">
                <vxe-input v-model="row.url" type="text"></vxe-input>
              </template>
            </vxe-column>

            <vxe-column field="parentName" width="140" title="所属上级" :edit-render="{ autofocus: '.vxe-input--inner' }" align="left">
              <template #edit="{ row }">
                <vxe-input v-model="row.parentName" type="text"></vxe-input>
              </template>
            </vxe-column>
            <vxe-column field="icon" width="50" title="图标" align="center" :edit-render="{ autofocus: '.vxe-input--inner' }">
              <template #default="{ row }">
                <el-icon size="17" class="icon">
                  <component :is="row.icon"></component>
                </el-icon>
              </template>

            </vxe-column>
          </vxe-table>
        </div>
      </Pane>
    </Splitpanes>
  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
import moment from 'moment';
import { VXETable } from 'vxe-table';

let { proxy }: any = getCurrentInstance();
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示
import { isEmpty } from 'lodash';
defineExpose({ initPage });
let orgManage = null;
let orgIndex = null;
let clickmodule = null;

function initPage(row: any, iidex: any) {
  orgManage = row;
  orgIndex = iidex;
  getModuleList();
}
let showLoading = ref(false); //刷新
let sLoading = ref(false); //刷新

let keywords = ref('');
let moduleList: any = reactive([]);

// 分页
let page = reactive({
  currentPage: 1,
  pageSize: 10000,
  totalResult: 0
});
// 请求模块表格数据
function getModuleList() {
  showLoading.value = true;
  let modulePageParam = {
    params: {
      pageIndex: page.currentPage,
      pageSize: page.pageSize,
      keywords: keywords.value,
      orgId: orgManage.id
    }
  };
  moduleList.length = 0; //放入数据前清空数组
  proxy.$http.get('/api/sys/getPageModules', modulePageParam).then((res: any) => {
    if (res.status.code === 1) {
      showLoading.value = false;
      // console.log('模块数据列表', res.status.code);
      page.totalResult = res.data.modulePageList.total;
      moduleList.push(...res.data.modulePageList.records);
      moduleRowClick({ row: moduleList[0], rowIndex: 0 });
      // VXETable.modal.message({ content: res.status.msg, status: 'success' });
    } else {
      VXETable.modal.message({ content: res.status.msg, status: 'error' });
      return;
    }
  });
}

// 点击行
function moduleRowClick({ row, rowIndex }) {
  if (!isEmpty(row)) {
    let $Xtable = proxy.$refs.moduleTable;
    $Xtable.setCurrentRow(row);
    //refMenu.value.initPage(row.id); //调用菜单组件方法
    clickmodule = row;
    getMenuList();
  } else {
    menuList.length = 0;
  }
}
let menuList: any = reactive([]);

// 获取菜单树型数据
function getMenuList() {
  sLoading.value = true;
  menuList.length = 0; //放入数据前清空数
  proxy.$http.get('/api/sys/menuList', { params: { moduleId: clickmodule.id } }).then((res: any) => {
    sLoading.value = false;
    // console.log('菜单数据', res.data.menuList);
    menuList.push(...res.data.menuList);
  });
}

let copyOrgId = ref(null);
function copyModuleAndMenu() {
  copyOrgId.value = orgManage.id;
}
function pasteModuleAndMenu() {
  const moduleAddParam = {
    sourceOrgId: copyOrgId.value,
    goalOrgId: orgManage.id,
    orgIndex: orgIndex
  };
  proxy.$http
    .post('/api/sys/copyModuleAndMenuByOrgId', moduleAddParam)
    .then((res: any) => {
      if (res.status.code === 1) {
        // VXETable.modal.message({ content: '创建成功', status: 'success' });
        VxeMessage('创建成功', VxeNotifyType.success);
      }
    })
    .catch((err: any) => {
      // VXETable.modal.message({ content: '创建异常', status: 'error' });
      VxeMessage('创建异常', VxeNotifyType.error);
    });
}

function pasteSysParam(){
const moduleAddParam = {
    sourceOrgId: copyOrgId.value,
    goalOrgId: orgManage.id,
    orgIndex: orgIndex
  };
  proxy.$http
    .post('/api/sys/sysParam/copySysParamByOrgId', moduleAddParam)
    .then((res: any) => {
      if (res.status.code === 1) {
        // VXETable.modal.message({ content: '创建成功', status: 'success' });
        VxeMessage('创建成功', VxeNotifyType.success);
      }
    })
    .catch((err: any) => {
      // VXETable.modal.message({ content: '创建异常', status: 'error' });
      VxeMessage('创建异常', VxeNotifyType.error);
    });
}
</script>

<style lang="scss" scoped>
#moduleAndMenuByOrgDiv {
  height: 100%;

  // 附加按钮间距
  .button-blue,
  .button-red {
    margin: 5px 0 5px 5px;
  }

  //右侧质控项目表格
  .tableBox {
    height: calc(100% - 40px);
    background-color: $base-white;
  }
}
</style>